<template>
  <div>
    <ul v-if="infoType != '预警消息'" class="content">
      <li @click="showDetail(item, 'notice')" v-for="(item, index) in data.infoList" :key="index">
        <p class="title">
          {{ item.title }}
        </p>
        <p class="time">{{ item.modifyTime }}</p>
      </li>
    </ul>
    <ul v-if="infoType == '预警消息'" class="content">
      <li @click="showDetail(item, 'wraning')" v-for="(item, index) in data.infoList" :key="index">
        <p>
          {{ item.warningTheme }}
        </p>
        <p class="time">{{ item.reminderTime?.slice(0, 10) || '暂无' }}</p>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, watch } from 'vue'

export default defineComponent({
  props: {
    infoType: {
      type: String,
    },
    infoList: {
      type: Array,
    },
  },
  setup(props, { emit }) {
    const data = reactive({
      infoList: [] as any,
    })
    const showDetail = (val, type) => {
      emit('showDetail', val, type)
    }
    watch(
      () => props.infoList,
      (newVal) => {
        data.infoList = newVal
        console.log(newVal, 'props.tableArr')
      },
      { deep: true, immediate: true }
    )
    return {
      data,
      showDetail,
    }
  },
})
</script>

<style scoped lang="scss">
.content {
  height: 45vh;
  overflow-y: scroll;
  font-size: 1.6vh;
  // padding: 0 .5vh;
  padding-right: 1vh;
  list-style-type: square;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  
  li {
    position: relative;
    display: flex;
    justify-content: space-between;
    cursor: pointer;

    .title {
      width: 80%;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    &::before {
      content: '';
      position: absolute;
      width: 1vh;
      height: 1vh;
      border: 0.1vh solid #a8afc4;
      background-color: #a8afc4;
      border-radius: 50%;
      border: 0.1vh solid #a8afc4;
      // border-bottom-color: transparent;
      // border-right-color: transparent;
      transform: translate(-50%, -50%) rotate(135deg);
      left: -1.5vh;
      top: 2.5vh;
    }
  }

  // &::-webkit-scrollbar {
  //   width: 1px;
  // }

  // &::-webkit-scrollbar-track {
  //   background: #0036ab;
  // }

  // &::-webkit-scrollbar-thumb {
  //   background-color: #0873dd;
  // }
}
</style>
